<script>
import { provide, ref } from 'vue';
import Content from "./components/Content.vue";
export default {
  data() {
    return {
      message: "helloworld",
    };
  },
  setup() {
    // 定义一个响应式变量
    // ref返回的是一个对象
    const name=ref('张三')
    
    // provide本身不是响应式的,但是传递ref响应式的变量或者reactive(),就可以是响应式的,这样的话父组件的值变化了,子组件也会跟着变化
    // 这里不能写provide('name',name.value) //不用写.value,直接把上面的name(它是一个响应式的对象),作为对象provide出去
    provide('name',name)
    function changeName(){
      name.value='李四'
    }
    return {changeName};
  },
  components: {
    Content,
  },
};
</script>

<template>
  <div>
    <Content/>
    <button @click="changeName">改变name</button>
  </div>
</template>
